<template>
	<view class="wrap">
		<view class="list">
      <uni-swipe-action :options="swipeOptions" v-for="(item, index) in list" @click="onDelete($event, index)" :data-index="index">
        <view class="item" @click="selectAddress(item)">
          <view class="name">{{item.realName}}<text>{{item.phone}}</text></view>
          <view class="address">
            <view class="address-detail">
              <text>{{tags[item.tag - 1]}}</text>{{item.province}}{{item.city}}{{item.address}}
            </view>
            <view class="edit" @click.stop="toEdit" :data-id="item.id">
              <text class="iconfont icon-brush"></text>编辑</view>
          </view>
          
        </view>
      </uni-swipe-action>
		</view>
    <view class="add iconfont icon-jia" @click="createAddress"></view>
	</view>
</template>

<script>
  import swipeAction from '../../components/uni-swipe-action/uni-swipe-action.vue'
  import{Address} from '../../apis/index.js'
  import {utils} from '../../utils/index.js'
  
	export default {
		data() {
			return {
        isLoading: false,
        tags: ['默认', '家', '公司', '学校'],
        list: [],
				swipeOptions: [{
          text: '删除',
          style: {
            backgroundColor: '#F02929'
          }
        }]
			}
		},
		methods: {
			createAddress () {
        wx.navigateTo({
          url: '/pages/createAddress/createAddress'
        })
      },
      toEdit (e) {
         let id = e.currentTarget.dataset.id
         utils.routerTo('/pages/createAddress/createAddress?id=' + id)
      },
      onDelete (e, index) {
        if (this.isLoading) return
        this.isLoading = true
         console.log('删除')
         console.log(e, index)
         utils.wxLoading('正在执行...')
         Address.deleteAddress({
           data: {
             query: {
               id: this.list[index].id
             }
           }
         }).then(res => {
           this.isLoading = false
           uni.hideLoading()
           console.log('删除成功', res)
         }, err => {
           uni.hideLoading()
           this.isLoading = false
           utils.wxToast('操作失败')
            console.error(err)
         })
      },
      selectAddress (item) {
        if (this.options.type !== 'select') return
        let pages = getCurrentPages()
        let prev = pages[pages.length - 2]
        prev.$vm.order.address = item
        uni.navigateBack({
          delta: 1
        })
        console.log(prev)
      }
		},
    onPullDownRefresh () {
       getList.call(this)
    },
    onLoad () {
      this.options = this.$scope.options
      getList.call(this)
    },
    onShow () {
      getList.call(this)
    },
    components: {
      'uni-swipe-action': swipeAction
    },
	}
  function getList () {
    let userInfo = wx.getStorageSync('userInfo')
    utils.wxLoading('加载中...')
    Address.getAddressList({
      data: {
        form: {
        },
        query: {
          id: userInfo.id
        },
        pagination: {}
      }
    }).then(res => {
      console.log('获取我的地址列表成功')
      console.log(res.data.list)
      uni.stopPullDownRefresh()
      uni.hideLoading()
      // wx.hideLoading()
      this.list = res.data.list
    }, err => {
      wx.hideLoading()
      console.error(err)
    })
  }
</script>

<style lang="scss">
  page {
    background-color: #EFEFEF;
    
  }
.wrap {
  .list {
    margin-top: 10rpx;
    .item {
      border-top: #EFEFEF 1rpx solid;
      box-sizing: border-box;
      background-color: #FFFFFF;
      padding: 30rpx 40rpx;
      .name {
        font-size: 28rpx;
        line-height: 40rpx;
        font-weight: bold;
        padding-bottom: 15rpx;
        text {
          font-weight: normal;
          padding-left: 16rpx;
          color: #666;
          font-size: 24rpx;
        }
      }
      .address {
        font-size: 28rpx;
        display: flex;
        .address-detail {
          flex: 1;
          box-sizing: border-box;
          padding-right: 10rpx;
          line-height: 1.5;
          text {
            background-color: #EFEFEF;
            padding: 0 10rpx;
            color: #333333;
            margin-right: 10rpx;
            &.tag-default {
              background-color: #FBE0B9;
              color: #FF9800;
            }
          }
        }
        .edit {
          display: flex;
          align-items: center;
          color: #666;
        }
      }
    }
  }
}
.add {
  width: 80rpx;
  height: 80rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: #EFEFEF 1rpx solid;
  position: fixed;
  right: 26rpx;
  bottom: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50rpx;
  color: #999;
}
</style>
